<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="./css/index.css" rel="stylesheet" />
		<link href="../../css/msg.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
		    <!--轮播图  start-->
		    <div id="slider" class="mui-slider message-img-height">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/login-carousel-4.jpg" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/login-carousel-3.jpg" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/login-carousel-1.jpg" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/login-carousel-2.jpg" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/login-carousel-4.jpg" />
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/login-carousel-3.jpg" />
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		    <!-- 轮播图  end -->
		    <!-- 节日祝福  strat-->
				<div class="mui-table-view-cell mui-collapse-content msg-background-color">
					<p class="mui-pull-left msg-font-color">节日祝福</p>
					<label>
						<p class="mui-pull-right msg-font-color" id="festivals">更多>></p>
					</label>
				</div>
				<div class="mui-row mui-text-center message-festival-adjust">
					<div class="mui-col-xs-3" id="messagesDetail">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">春节</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">圣诞节</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">七夕</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">情人节</p>
					</div>
				</div>
		    <!-- 节日祝福  end-->
		    <!-- 情景短信  strat-->
				<div class="mui-table-view-cell mui-collapse-content msg-background-color">
					<p class="mui-pull-left msg-font-color">情景短信</p>
					<label>
						<p class="mui-pull-right msg-font-color" id="scenes">更多>></p>
					</label>
				</div>
				<div class="mui-row mui-text-center message-festival-adjust">
					<div class="mui-col-xs-3" id="messagesDetail">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">幽默</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">恋爱</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">搞笑</p>
					</div>
					<div class="mui-col-xs-3">
						<img src="img/icon-green.png" class="message-festival-img" />
						<p class="msg-font-size">心灵</p>
					</div>
				</div>
		    <!-- 情景短信  end-->
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script type="text/javascript">
			mui.init({
				
			});
			var messagesDetail = document.getElementById("messagesDetail");
			messagesDetail.addEventListener("tap", function(e) {
			//打开详情
			mui.openWindow({
			    url:getRootPath() + 'page/message/detail.html',
			    id: 'page/message/detail.html',
			    show:{
			    		aniShow: 'slide-in-right',
			    		duration: 200,
			    		event: 'loaded',
					  	autoShow:true,
				   	},
				waiting: {
						title: '加载中...'
					}
			  	});
			});
		</script>
	</body>
</html>